<template>
  <div id="center_text">
    <div v-if="go===true" style="float: left" >
      <div>
        贷款金额
        <input type="text" style="width: 455px;" placeholder="元" v-model="money"/>
      </div><br>
      <div class="center_a">
        贷款期限
        <input type="text" style="width: 455px;" placeholder="月" v-model="time"/>
      </div><br>
      <div>
        每月利息
        <input type="text" style="width: 455px;" placeholder="分" v-model="rate"/>
      </div><br>
      <div>
        还款方式
        <input type="text" style="width: 455px" list="waylist" placeholder="请选择" v-model="way"/>
        <datalist id="waylist">
          <option>等额本息还款</option>
          <option>等额本金还款</option>
          <option>按月付息，到期还本</option>
          <option>一次性偿还本金和利息</option>
        </datalist>
      </div><br>
      <button @click="isShow(false)" id="center_go" >开始计算</button>
      <button id="center_to">重置数值</button>
    </div>
    <div v-if="go===false" style="float: left">
      <div>
        <div class="send">贷款金额:{{sumMoney}}</div>
        <div class="send">还款方式:{{ways}}</div>
        <div class="send">还款月数:{{paySum}}</div>
        <div class="send">贷款利率:{{rates}}</div>
        <div class="send">本息合计:{{moneySum}}</div>
      </div>
      <button @click="isShow(true)" id="fanhui">返回</button>
    </div>
    <div class="right_a">
      <img :src='center_image' alt="" style="width: 500px">
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Center_4",
  data() {
    return {
      input: '',
      money: '',
      rate: '',
      time: '',
      way: '',
      center_image:require("../../assets/images/center_4.png"),

      go: true,
    }
  },
  computed:{

    sumMoney(){
      return this.money

    },
    ways(){
      return this.way
    },
    paySum(){
      return this.time
    },
    rates(){
      return (this.rate*0.01).toFixed(4)
    },
    moneySum(){
      const rs = (this.rate*0.01).toFixed(4)
      const rt = (this.rate*0.01/12).toFixed(4)
      const ra = parseInt(this.time)
      const rb = parseInt(this.money)
      //等额本息还款
      //每月还款额=[总本金×月利率×(1+月利率)^还款月数]÷[(1+月利率)^总期数-1
      const r_a = '等额本息还款'
      const r_c = parseInt(1+rs)^ra
      const rrate_a = parseInt((rb*rs*r_c)/(r_c-1))
      //等额本金还款
      //〔(总贷款额÷还款月数+总贷款额×月利率)+总贷款额÷还款月数×(1+月利率)〕÷2×还款月数-总贷款额
      //还款总额=（还款月数+1）×贷款额×月利率/2+ 贷款额.
      const r_b = '等额本金还款'
      const rrate_b = (ra+1)*this.money*rt/2
      //按月付息，到期还本

      //一次偿还本金和利息

      if (this.way===r_a){
        return parseInt(rrate_a)+parseInt(rb)
      }else if (this.way===r_b){

        return parseInt(rrate_b)+parseInt(this.money)
      }
      return this.money
    }
  },
  methods:{
    isShow(b){
      this.go=b;
      if(this.money===''){
        alert('请输入贷款金额')
        this.go=true
      }else if(this.time===''){
        alert('请输入贷款期限')
        this.go=true
      }else if(this.rate===''){
        alert('请选择利率')
        this.go=true
      }else if (this.way===''){
        alert('请选择还款方式')
        this.go=true
      }
    },
  },
  /* mounted() {
     console.log(this.$route)
   },*/
}
</script>

<style scoped>

#center_text{
  margin: 30px 0 10px 0;
  width: 1100px;
  height: 500px;
  font-size: 18px;
  margin-left: 280px;
}
#center_text input{
  width: 220px;
  height: 49px;
  background-color: gainsboro;
  border:none;
  margin-left: 10px;
}
.right_a{
  width: 500px;
  height: 400px;
  float: right;
  //background-color: bisque;
}
#center_go,#fanhui{
  width: 200px;
  height: 49px;
  border-radius: 8px;
  background-color: cornflowerblue;
  margin: 30px 0 10px 85px;
}
#center_to{
  width: 200px;
  height: 49px;
  border-radius: 8px;
  background-color: cornflowerblue;
  margin-left: 60px;
}
.send{
  margin: 30px 0 10px 85px;
  width: 400px;
  height: 49px;
  background-color: gainsboro;
  line-height: 50px;
}
</style>